<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  引入本地css样式  -->
    <link rel="stylesheet" href="css/login.css">
    <!-- 引入本地jquery函数库 -->
    <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
    <script type="text/javascript">
         $(function (){
              // 给登录按钮绑定点击事件
              $("#btn_login").click(function (){
                    // 获取输入框账户值
                    var account = $("input[name=account]").val();
                    // 获取输入框密码值
                    var password = $("input[name=password]").val();
                    // 向后端发起请求-ajax
                    $.ajax({
                        url:"/login", // 后端接口URI地址
                        type:"get", // 提交参数方式get | post
                        data:{account:account,password:password}, //提交参数：普通js序列化对象，json对象
                        dataType:"json", //后端返回的数据类型：text | html | script | json(极力推荐) .....
                        success:function (res){ // 成功后回调函数
                            if(res.code == 0){//登录成功
                                 // 登录成功后将用户信息转换为json字符串对象塞入localStorage对象中去
                                 localStorage.setItem("userInfo",JSON.stringify(res.data))
                                 //跳转到系统首页
                                 window.location.href = "/main.html";
                            }
                            if(res.code == -1){
                                //提示错误信息
                               alert(res.message);
                            }
                        }
                    })
              })
         })
    </script>
</head>
<body>

<!-- 前端端数据交互方式，主要有2种：
       1. 同步请求：阻塞
           1.1 普通表单提交：<form action="/login" method="get">.....</form>， 默认选择提交的方式可以为：get | post
           1.2 超级链接提交：<a href="/login?account=admin&password=123456">登录</a>, 默认提交方式为：get
           1.3 直接构造URL访问方式：http://localhost:8080/login?account=admin&password=2312321 , 默认提交方式为：get
       2. 异步请求：非阻塞
           ajax -- 重点 -- 写不了项目
           axios
 -->
    <fieldset>
        <legend>登录页面</legend>
            <p>
                账户：<input type="text" name="account" />
            </p>
            <p>
                密码：<input type="password" name="password" />
            </p>
            <p>
                <button id="btn_login">登录</button>
            </p>
    </fieldset>
    <hr>
     <a href="/login?account=admin&password=123456">登录</a>

</body>
</html>